<template>
  <div class="event">
    <div class="event-header">
      <!-- 自定义左右切换按钮 -->
      <div class="title">最新活动</div>
      <div class="custom-arrows">
        <div class="arrow left" @click="handlePrev">
          <svg-icon name="arrow-left" class="svg-style"></svg-icon>
        </div>
        <div class="arrow right" @click="handleNext">
          <svg-icon name="arrow-right" class="svg-style"></svg-icon>
        </div>
      </div>
    </div>

    <div class="custom-swiper">
      <el-carousel
        :autoplay="false"
        :indicator-position="'none'"
        :arrow="'never'"
        ref="carousel"
        height="420"
      >
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="swiper-content">
            <!-- 浮动的装饰 -->
            <div class="decorate">
              <svg-icon name="wave" class="svg-style"></svg-icon>
            </div>
            <div class="left-img" data-aos="fade-right" data-aos-delay="100">
              <img
                src="https://img1.baidu.com/it/u=1426534797,4039946426&fm=253&app=138&f=JPEG?w=1154&h=800"
                alt=""
              />
            </div>
            <div class="middle-spacer" data-aos="custom-slide-up"></div>
            <div class="right-info" data-aos="fade-left" data-aos-delay="200">
              <div class="date" data-aos="fade-left" data-aos-delay="300">
                2023年12月18日至29日
              </div>
              <div class="title" data-aos="fade-left" data-aos-delay="400">
                《场边的凝视》，体育摄影家、川观拍客王瑞林体育摄影展在成都举办
                《场边的凝视》，体育摄影家、川观拍客王瑞林体育摄影展在成都举办
              </div>
              <div class="describe" data-aos="fade-left" data-aos-delay="500">
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
                2月18日，一场名为《场边的凝视》——王瑞林体育摄影作品展在甲丁摄影典藏画廊举办。摄影展时间为2023年2月18日至28日。
              </div>
              <div class="buts" data-aos="fade-left" data-aos-delay="600">
                <button>详情</button>
                <button>全部活动列表</button>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
const carousel = ref(null);

const handlePrev = () => {
  carousel.value?.prev();
};
const handleNext = () => {
  carousel.value?.next();
};
</script>

<style lang="less" scoped>
.event {
  width: 100%;
  margin: 210px auto;
  padding: 0 110px;
  box-sizing: border-box;

  .event-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 40px;
      color: #232323;
      text-align: left;
      position: relative;
      padding-left: 27px;
      line-height: 50px;
      box-sizing: border-box;
    }

    .title::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 50px;
      background: var(--theme-gradient-bg);
    }

    .custom-arrows {
      display: flex;
      justify-content: center;

      .arrow {
        width: 44px;
        height: 44px;
        background: #1d1b1b;
        border-radius: 0px 0px 0px 0px;
        text-align: center;
        line-height: 44px;
        cursor: pointer;

        .svg-style {
          color: #ffffff;
          font-size: 30px;
        }
      }

      .left {
        margin-right: 12px;
      }
    }
  }

  .custom-swiper {
    width: 100%;
    margin-top: 80px;

    :deep(.el-carousel) {
      height: 420px;
    }

    :deep(.el-carousel__container) {
      height: 100%;
    }

    .swiper-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      position: relative;

      .decorate {
        position: absolute;
        left: 43%;
        top: 56px;
        color: #ffffff;
        font-size: 50px;
        z-index: 1;
      }

      .left-img {
        width: 45%;
        height: 330px;
        padding-top: 26px;
        box-sizing: border-box;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .middle-spacer {
        width: 170px;
        height: 430px;
        background: var(--el-color-primary);
      }

      .right-info {
        width: calc(100% - 45% - 170px);
        padding: 26px;
        box-sizing: border-box;

        .date {
          font-family: PingFang HK, PingFang HK;
          font-weight: 500;
          font-size: 16px;
          color: #656c7e;
          text-align: left;
          margin-bottom: 33px;
        }

        .title {
          font-family: PingFang HK, PingFang HK;
          font-weight: 500;
          font-size: 30px;
          color: #000000;
          text-align: left;
          // 添加以下属性
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 20px;
        }

        .describe {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 18px;
          color: #656c7e;
          text-align: left;
          margin-bottom: 58px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .buts {
          width: 100%;

          button {
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #1e2021;
            padding: 10px 35px;
            box-sizing: border-box;
            cursor: pointer;
          }

          button:first-child {
            margin-right: 12px;
          }
        }
      }
    }
  }
}
</style>
